<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>CLaPee Shuffle</title>
<link type="text/css" rel="stylesheet" href="css/jquery.mobile-1.0a4.1.css" />
<link type="text/css" rel="stylesheet" href="skin/jplayer.blue.monday.css" />
<link type="text/css" rel="stylesheet" href="css/clapee.css" />
<!--[if lte IE 8]><script src="html5.js" type="text/javascript"></script><![endif]-->
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0a4.1.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery-fonteffect-1.0.0.js"></script>
<script type="text/javascript" src="js/jcanvas.js"></script>
<script type="text/javascript" src="js/clapee.js"></script>
</head>
<body>
<div data-role="page" id="main">
  <div data-role="header">
    <h1>anatanokeitai.com</h1>
    <a href="#" data-icon="delete" class="ui-btn-right">Exit</a>
  </div>
  <div data-role="content">
    <div id='title1'>CLaPee Shuffle</div>
    <div style="text-align:center;"><span id="title2">Suga</span><span id="title3">Radio</span></div>

<div id="jquery_jplayer"></div>  
<div class="jp-audio" id="player" style="margin-top:30pt;margin-bottom:10pt;">
  <div class="jp-type-single">
    <div id="jp_interface_1" class="jp-interface">
      <ul class="jp-controls">
        <li><a href="#" class="jp-play" tabindex="1">play</a></li>
        <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
        <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
        <li><a href="#" class="jp-previous" tabindex="1">prev</a></li>
        <li><a href="#" class="jp-next" tabindex="1">next</a></li>
        <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
        <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
      </ul>
      <div class="jp-progress">
        <div class="jp-seek-bar">
          <div class="jp-play-bar"></div>
        </div>
      </div>
      <div class="jp-volume-bar">
        <div class="jp-volume-bar-value"></div>
      </div>
      <div class="jp-current-time"></div>
      <div class="jp-duration"></div>
    </div>
    <div id="jp_playlist_1" class="jp-playlist">
      <ul>
        <li>Title of media</li>
      </ul>
    </div>
  </div>
</div>

  </div>
  <div data-role="footer">
    <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" style="text-align:center;">
      <input type="checkbox" name="checkbox-1" id="checkbox-1" />
      <label for="checkbox-1" data-icon="plus" >MP3</label>
      <input type="checkbox" name="checkbox-2" id="checkbox-2" />
      <label for="checkbox-2" data-icon="plus" >AAC</label>
      <input type="checkbox" name="checkbox-3" id="checkbox-3" />
      <label for="checkbox-3" data-icon="plus" >OGG</label>
    </fieldset>
  </div>
</div>

</body>
</html>
